<template>
  <view class="common-mobile-modal" v-if="visible">
    <view class="common-mobile-modal__dialog">
      <view class="common-mobile-modal__title"></view>
      <view class="common-mobile-modal__body">研途申请获取您的信息用于快捷 登录，请选择【允许】</view>
      <view class="common-mobile-modal__authbtn">
        <button class="common-mobile-modal__authbtn"
                open-type="getPhoneNumber"
                bindgetphonenumber="_mtOnGetUserInfo"
                hover-class="common-mobile-modal__authbtn-hover">确认授权
        </button>
      </view>
    </view>
    <image class="common-mobile-modal__close"
           src="{{src}}"
           @tap="onCloseTap"
    ></image>
  </view>
</template>

<script>
  export default {
    properties: {
      visible: {
        type: Boolean,
        value: false
      },
    },
    behaviors: [
    ],
    data() {
      return {
        src: 'http://oss.kaoyanvip.cn/uploads/file1556530834610.png',
      }
    },
    attached: function () {
      wx.login()
    },
    methods: {
      show() {
        this.setData({
          visible: true
        })
      },
      close() {
        this.setData({
          visible: false
        })
      },
      onGetUserInfo(e) {
        console.d(e)
      },
      _mtOnGetUserInfo(e) {
        console.log('_mtOnGetUserInfo', e)
        let detail = e.detail
        if (detail.errMsg && detail.errMsg.indexOf('fail') > -1) {
          this.mtGetUserInfoFail && this.mtGetUserInfoFail(detail.errMsg, e)
        } else {
          this.mtGetUserInfoSuccess && this.mtGetUserInfoSuccess(e)
        }
      },
      mtGetUserInfoFail(msg, e) {
        // console.d('failed')
        wx.showToast({
          title: msg + '',
          icon: 'none'
        })
        this.$native.emit('failed', e.detail)
      },
      mtGetUserInfoSuccess(e) {
        // console.d('success')
        // console.log(e.detail.errMsg)
        // console.log(e.detail.iv)
        // console.log(e.detail.encryptedData)

        this.$native.emit('success', e.detail)
      },
      onCloseTap(e) {
        this.close()
        this.$native.emit('close', e.detail)
      }
    },
  }
</script>

<style lang="less">
  .common-mobile-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;


    &__dialog {
      width: 480rpx;
      height: 585rpx;
      background-image: url("http://oss.kaoyanvip.cn/uploads/file1556588966590.png");
      background-size: 100%;
      background-repeat: no-repeat;
      margin-bottom: 40rpx;
      position: relative;
    }

    &__title {
      font-size: 36rpx;
      color: rgb(51, 51, 51);
      font-weight: bold;
      line-height: 1.222;
      margin-bottom: 10rpx;
      text-align: center;
      margin-top: 326rpx;
    }

    &__body {
      font-size: 24rpx;
      color:#999999;
      line-height: 1.6;
      text-align: center;
      max-width: 360rpx;
      margin: 0 auto;
      margin-bottom: 50rpx;
    }

    &__authbtn {
      width:300rpx;
      background-color:#19c974;
      color:#fff;
      border:none;
      font-size: 30rpx;
      line-height: 2.2;
      &:after {
        border: none;
      }

      display: block;
      margin: 0 auto;
      border-radius: 1000px;
    }

    &__close {
      width: 64rpx;
      height: 64rpx;
    }
  }
</style>
